<template>
    <view class="li">
        <view class="left">
            <view class="top-num icon first" v-if="index === 1">{{ index < 10? '0' + index:index }}</view>
            <view class="top-num icon second" v-if="index === 2">{{ index < 10? '0' + index:index }}</view>
            <view class="top-num icon third" v-if="index === 3">{{ index < 10? '0' + index:index }}</view>
            <view class="left-num" v-if="index > 3">{{ index < 10? '0' + index:index }}</view>
            <view class="top-image">
                <u-image
                    :src="info.avatar? info.avatar:'https://img.ionepin.com/9f5ef9c1be66818db4eb8c9e2b435d743e9a58f2.png'"
                    width="66rpx"
                    height="66rpx"
                    shape="circle"
                ></u-image>
                <view class="icon-win" v-if="index === 1"></view>
            </view>
        </view>
        <view class="right">
            <view class="user-name">{{ info.nickName }}</view>
            <view class="user-info">
                <view class="user-info-label">邀请人数</view>
                <view class="user-info-num">{{ num }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "index",
        props: {
            index: {
                type: Number
            },
            info: {
                type: Object,
                default: () => {}
            },
            num: {
                type: Number,
                default: 0
            }
        }
    }
</script>

<style lang="scss" scoped>
    .li {
        display: flex;
        align-items: center;
        margin-bottom: 63rpx;
        .left {
            display: flex;
            align-items: center;
            .top-num {
                font-size: 28rpx;
                font-weight: normal;
                color: #FFFFFF;
                margin-right: 12rpx;
                text-align: center;
                line-height: 45rpx;
            }
            .left-num {
                font-size: 28rpx;
                font-weight: normal;
                color: #7381D8;
                margin-right: 12rpx;
                text-align: center;
                line-height: 1.2;
            }
            .icon {
                width: 45rpx;
                height: 45rpx;
            }
            .first {
                background: url("https://img.ionepin.com/c9e3fed62e24bf0c2ce1d78a77116d1030dcc85a.png") no-repeat;
                background-size: 100% 100%;
            }
            .second {
                background: url("https://img.ionepin.com/0eda7df36e8e94076e85c1c09192f39c37e12c98.png") no-repeat;
                background-size: 100% 100%;
            }
            .third {
                background: url("https://img.ionepin.com/075d1b43cfb9140218c32ca0b0f6eb6d64977279.png") no-repeat;
                background-size: 100% 100%;
            }
            .top-image {
                position: relative;
                .icon-win {
                    position: absolute;
                    right: -18rpx;
                    top: -18rpx;
                    background: url("https://img.ionepin.com/ed0017369b7c0cc097d1b14f01596da8e770e5d5.png") no-repeat;
                    background-size: 100% 100%;
                    width: 38rpx;
                    height: 38rpx;
                }
            }
        }
        .right {
            display: flex;
            justify-content: space-between;
            flex: auto;
            margin-left: 20rpx;
            .user-name {
                font-size: 26rpx;
                font-weight: 400;
                color: #4A4A4A;
                line-height: 1.5;
            }
            .user-info {
                display: flex;
                align-items: center;
                .user-info-label {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #88A9F1;
                    margin-right: 14rpx;
                    line-height: 1.2;
                }
                .user-info-num {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #356CE7;
                    line-height: 40rpx;
                }
            }
        }
    }
</style>
